基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註 – WalkonNet

#基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註 – WalkonNet| 来源: 网络整理| 查看: 265

目錄官方案例繪制矩形繪制多邊形繪制橢圓繪制圓形繪制立方體繪制橢圓柱體繪制多邊柱體繪制圓柱體立體串串好難形容又平面又立體的板板 “回”字繪制立方體，扭轉一定角度的在天上飄著的橢圓柱體繪制椎體平面圖形的串串

這個是啥子嘞，就是向cesium上面添加圓形、正方形啥的。

官方案例

https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html

官網寫的很好瞭，但是有一些沒有註釋，所以說剛入門的小可愛們不知道那些代碼分別是繪制啥的，所以說嘞，我稍微整理瞭一下。

繪制矩形 const stripeMaterial = new Cesium.StripeMaterialProperty({ evenColor: Cesium.Color.WHITE.withAlpha(0.5), oddColor: Cesium.Color.BLUE.withAlpha(0.5), repeat: 5.0, }); // 繪制矩形 let graphical = viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees(116.8, 36.1, 116.9, 36.2), // 最西、最南、最東、最北 outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(45), // material: stripeMaterial, }, })

繪制多邊形 let graphical = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ // 繪制多邊形，經度和緯度值列表。值交替顯示[經度，緯度，經度，緯度...]。 -107.0, 27.0, -107.0, 22.0, -102.0, 23.0, -97.0, 21.0, -97.0, 25.0, ]) ), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, // material: stripeMaterial, }, })

繪制橢圓 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.8, 36.1), ellipse: { semiMinorAxis: 300000.0, // 指定半短軸的數字屬性。 semiMajorAxis: 500000.0, // 指定半長軸的數值屬性。 rotation: Cesium.Math.toRadians(-40.0), // 一個數字屬性，指定橢圓從北方逆時針旋轉。 outline: true, // 一個佈爾屬性，指定是否勾勒出橢圓。 outlineColor: Cesium.Color.WHITE, // 一個屬性，指定輪廓的顏色 outlineWidth: 4, // 一個數字屬性，指定輪廓的寬度。 stRotation: Cesium.Math.toRadians(22), // 一個數字屬性，指定橢圓紋理從北方逆時針旋轉。 // material: stripeMaterial, }, });

繪制圓形 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-72.0, 25.0), ellipse: { semiMinorAxis: 250000.0, semiMajorAxis: 250000.0, rotation: Cesium.Math.toRadians(-40.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(90), // material: stripeMaterial, }, });

繪制立方體 // 繪制立方體 let graphical = viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -118.0, 38.0, -116.0, 40.0 ), extrudedHeight: 500000.0, outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, stRotation: Cesium.Math.toRadians(45), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

繪制橢圓柱體 // 繪制橢圓柱體 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-117.0, 35.0), ellipse: { semiMinorAxis: 100000.0, semiMajorAxis: 200000.0, height: 100000.0, extrudedHeight: 200000.0, rotation: Cesium.Math.toRadians(90.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

繪制多邊柱體 // 繪制多邊柱體 let graphical = viewer.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), height: 300000.0, extrudedHeight: 700000.0, outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

繪制圓柱體 // 繪制圓柱體 let graphical = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-70.0, 45.0, 100000.0), cylinder: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), length: 200000.0, topRadius: 150000.0, // 一個數字屬性，指定圓柱頂部的半徑。 bottomRadius: 150000.0, // 一個數字屬性，指定圓柱體底部的半徑。 outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

立體串串 for (i = 0; i < 5; ++i) { let = height = 100000.0 + 200000.0 * i; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height), box: { dimensions: new Cesium.Cartesian3(90000.0, 90000.0, 90000.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height), ellipsoid: { radii: new Cesium.Cartesian3(45000.0, 45000.0, 90000.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height), ellipsoid: { radii: new Cesium.Cartesian3(67500.0, 67500.0, 67500.0), outline: true, outlineColor: Cesium.Color.WHITE, outlineWidth: 2, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); }

好難形容又平面又立體的板板 // 繪制啥這是，又平面又立體的板板 viewer.entities.add({ wall: { positions: Cesium.Cartesian3.fromDegreesArray([ -95.0, 50.0, -85.0, 50.0, -75.0, 50.0, ]), maximumHeights: [500000, 1000000, 500000], minimumHeights: [0, 500000, 0], outline: true, outlineColor: Cesium.Color.LIGHTGRAY, outlineWidth: 4, material: Cesium.Color.fromRandom({ alpha: 0.7 }), }, });

“回”字 // 我滴媽呀，越來越難形容，一個“回”字 viewer.entities.add({ polygon: { hierarchy: { positions: Cesium.Cartesian3.fromDegreesArray([ -109.0, 30.0, -95.0, 30.0, -95.0, 40.0, -109.0, 40.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -107.0, 31.0, -107.0, 39.0, -97.0, 39.0, -97.0, 31.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -105.0, 33.0, -99.0, 33.0, -99.0, 37.0, -105.0, 37.0, ]), holes: [ { positions: Cesium.Cartesian3.fromDegreesArray([ -103.0, 34.0, -101.0, 34.0, -101.0, 36.0, -103.0, 36.0, ]), }, ], }, ], }, ], }, // material: stripeMaterial, }, });

繪制立方體，扭轉一定角度的 // 繪制立方體，帶旋轉的 viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -110.0, 38.0, -107.0, 40.0 ), height: 700000.0, // 一個數字屬性，用於指定多邊形相對於橢球表面的高度 extrudedHeight: 100000.0, // 一個數字屬性，用於指定多邊形的凸出面相對於橢球面的高度。 rotation: Cesium.Math.toRadians(45), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

在天上飄著的橢圓柱體 // 在天上飄著的橢圓柱體 viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-110.0, 35.0), ellipse: { semiMinorAxis: 100000.0, semiMajorAxis: 200000.0, height: 300000.0, extrudedHeight: 700000.0, rotation: Cesium.Math.toRadians(-40.0), material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

繪制椎體 viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-70.0, 40.0, 200000.0), cylinder: { hierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray([ -118.0, 30.0, -115.0, 30.0, -117.1, 31.1, -118.0, 33.0, ]) ), length: 400000.0, topRadius: 0.0, bottomRadius: 200000.0, material: Cesium.Color.fromRandom({ alpha: 1.0 }), }, });

平面圖形的串串 // 平面圖形的串串 for (i = 0; i < 5; ++i) { let height = 200000.0 * i; viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0), ellipse: { semiMinorAxis: 200000.0, semiMajorAxis: 200000.0, height: height, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); viewer.entities.add({ rectangle: { coordinates: Cesium.Rectangle.fromDegrees( -67.0, 27.0, -63.0, 32.0 ), height: height, material: Cesium.Color.fromRandom({ alpha: 0.5 }), }, }); }

以上就是基於Cesium實現繪制圓形,正方形,多邊形,橢圓圖形標註的詳細內容，更多關於Cesium繪制圖形標註的資料請關註WalkonNet其它相關文章！

推薦閱讀：基於Cesium實現衛星在軌繞行動畫 vue使用計算屬性完成動態滑竿條制作用React Native制作一個簡單的遊戲引擎 three.js簡單實現類似七聖召喚的擲骰子 JS實現鼠標移動拖尾

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章